<template> 
  <div class="main-container">
    <!-- 标题框 -->
    <div class="header-container">
      <div class="header-box">
        <button @click="goBack" class="btn btn-back">返回</button>
        <h1 class="title">分类断代</h1>
      </div>
    </div>

    <!-- 内容框 -->
    <div class="content-container">
      <!-- 内容框，包含功能介绍和原始图 -->
      <div class="content-box">
        <!-- 功能介绍文字，封装在一个深色、有圆角的框内 -->
        <div class="introduction-box">
          <p class="introduction-text">
            上传一张古青铜器的图片，即可获得预测类别和年代
          </p>
          <p class="note-text">
            （注：请选取正面角度拍摄的铜器照片，尽量简化背景元素）
          </p>
          <p class="available-types">
            目前开放类：<strong>鼎、簋、爵、尊、甗、匜、鐘、觚、觶、鬲、壺、卣</strong>
          </p>
        </div>

        <!-- 原始图 -->
        <h3 class="image-title">输入图片</h3>
        <div class="image-box">
          <div class="image-content">
            <img v-if="uploadedImage" :src="uploadedImage" alt="Uploaded Image" class="preview-image" />
            <div v-else class="placeholder" @click="selectImage">
              <p>点击选择图片</p>
            </div>
            <!-- 处理中覆盖层 -->
            <div v-if="processing" class="processing-overlay">
              <div class="progress-bar">
                <div class="progress" :style="{ width: progress + '%' }"></div>
              </div>
              <p class="processing-text">处理中... {{ progress }}%</p>
            </div>
          </div>
        </div>
        <input type="file" @change="handleFileUpload" ref="fileInput" accept="image/*" style="display: none;" />

        <!-- 上传按钮和重新上传按钮 -->
        <div class="upload-buttons">
          <button v-if="uploadedImage && !processing && !showResult" @click="startProcessing" class="btn btn-upload">上传并识别</button>
          <button v-if="uploadedImage && !processing" @click="resetUpload" class="btn btn-reupload">重新上传</button>
        </div>
      </div>

      <!-- 预测结果框 -->
      <div v-if="showResult">
        <div class="result-box">
          <!-- 预测结果标题 -->
          <div class="result-container">
            <h2 class="result-title">预测结果</h2>
          </div>

          <!-- 预测结果展示 -->
          <div class="prediction-result">
            <!-- 最前面的概率最高的类别和年代 -->
            <div class="top-result">
              <span class="top-category">
                <strong class="label-header">类别：</strong> {{ class2Mapping[topCategory.label] || '未知' }} 
                <span class="probability">({{ (topCategory.probability * 100).toFixed(2) }}%)</span>
              </span>
              <span class="top-era">
                <strong class="label-header">年代：</strong> {{ class1Mapping[topEra.label] || '未知' }} 
                <span class="probability">({{ (topEra.probability * 100).toFixed(2) }}%)</span>
              </span>
            </div>

            <!-- 其他预测结果 -->
            <div class="other-results">
              <div class="other-section">
                <h4>其他类别预测：</h4>
                <ul>
                  <li v-for="(result, index) in otherCategories" :key="'other-category-' + index">
                    {{ class2Mapping[result.label] || '未知' }}: {{ (result.probability * 100).toFixed(2) }}%
                  </li>
                </ul>
              </div>
              <div class="other-section">
                <h4>其他年代预测：</h4>
                <ul>
                  <li v-for="(result, index) in otherEras" :key="'other-era-' + index">
                    {{ class1Mapping[result.label] || '未知' }}: {{ (result.probability * 100).toFixed(2) }}%
                  </li>
                </ul>
              </div>
            </div>

            <!-- 描述 -->
            <div class="description">
              <strong>描述:</strong> {{ currentDescription }}
            </div>

            <!-- 再识别一张按钮
            <div class="recognize-button">
              <button @click="resetAll" class="btn btn-recognize">再识别一张</button>
            </div> -->
          </div>
        </div>
      </div>

      <!-- 模态框 -->
      <div v-if="modalVisible" class="modal" @click="closeModal">
        <div class="modal-content" @click.stop>
          <img :src="modalImage" alt="Enlarged Image" class="modal-image" />
          <button @click="closeModal" class="btn-close">
            <XIcon size="24" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { XIcon } from 'lucide-vue-next';
import { BASE_URL } from '@/config.js';

export default {
  components: {
    XIcon,
  },
  data() {
    return {
      selectedFile: null,
      uploadedImage: null,
      processing: false,
      progress: 0,
      showResult: false,
      modalVisible: false,
      modalImage: null,
      // 类别映射 for class2 (类别)
      class2Mapping: {
        "0":"鼎",
        "1":"觚",
        "2":"簋",
        "3":"壺",
        "4":"爵",
        "5":"鬲",
        "6":"甗",
        "7":"匜",
        "8":"卣",
        "9":"觶",
        "10":"鐘",
        "11": "尊",
        "12": "未知"
      },
      // 类别映射 for class1 (年代)
      class1Mapping: {
        "0": "春秋",
        "1": "商",
        "2": "西周",
        "3": "战国",
        "4": "未知"
      },
      // 类别描述映射，仅针对类别 (class2)
      descriptionMapping: {
        // 您之前提供的描述映射，保持不变
        // ...
        "0": [
        "鼎是古代中国重要的青铜器之一，广泛用于烹饪、祭祀和国家重大仪式。作为权力和地位的象征，鼎常被用来代表君主的统治权。鼎的结构通常包括三个或四个稳固的腿和两个对称的把手，设计精美，纹饰复杂，反映了古代工匠高超的铸造技术和艺术水平。鼎不仅具备实用功能，还承载着丰富的文化和宗教意义，是古代礼器中不可或缺的一部分。",
        "青铜鼎在古代社会中具有重要的象征意义，常用于祭祀活动和宴会，体现出主人的尊贵身份和社会地位。鼎的造型多样，装饰精美，常见的纹饰包括云雷纹、饕餮纹等，寓意吉祥和丰收。鼎的数量和大小也反映了使用者的权力等级，通常只有贵族和统治者才能拥有大型的青铜鼎。通过鼎的使用和展示，古代社会强化了君权神授的理念和等级制度。",
        "古青铜鼎不仅是烹饪和祭祀的工具，更是艺术品和权力象征的结合体。鼎的铸造工艺复杂，通常采用失蜡法或其他高精度铸造技术，以确保其精美的纹饰和坚固的结构。鼎的形态多样，既有实用型，也有装饰型，反映了不同历史时期和地区的文化特色。鼎在古代墓葬中常作为陪葬品，象征着死者的尊贵身份和对来世的祈愿。",
        "鼎作为古代青铜器的重要代表，见证了中国古代冶铸技术的发展和文化的演变。鼎的设计通常结合了实用性和仪式性，既能用于日常烹饪，又能在祭祀活动中发挥重要作用。鼎的大小、重量和装饰风格都反映了其所属的时代背景和社会阶层。通过鼎的考古发现，学者们可以深入了解古代社会的经济、文化和宗教信仰。",
        "青铜鼎在古代不仅是实用的器具，更是政治和宗教权力的象征。鼎常被刻上铭文，记录重大事件、祭祀内容或主人的功绩，成为研究古代历史的重要资料。鼎的数量和精美程度直接体现了主人的地位和财富，鼎文化在古代礼仪中占据重要地位，通过鼎的传承和使用，巩固了统治者的合法性和权威性。鼎的存在和使用深刻影响了古代社会的文化传统和价值观念。"
      ],
      "1": [
        "觚是古代中国的一种高脚杯形青铜器，主要用于盛酒和祭祀活动。觚的设计优雅，通常具有细长的颈部和宽大的杯身，便于倒酒和饮用。觚的装饰多样，常见的纹饰包括几何图案、动物形象和象征性的符号，体现了古代工匠的精湛技艺和艺术创意。作为礼器，觚不仅具备实用功能，还象征着社交礼仪和文化交流的重要性。",
        "在古代宴会和祭祀仪式中，觚扮演着不可或缺的角色。它象征着盛宴的丰盛和祭祀的庄重，常被置于祭坛或宴席的中央，作为主人的礼物和敬意的象征。觚的数量和材质也反映了主人的社会地位和财富水平，通常由贵族和统治者使用大型精美的觚器。通过觚的使用，古代社会表达了对神灵的敬仰和对宾客的尊重。",
        "古青铜觚的制作工艺复杂，通常采用失蜡法或分段铸造技术，以确保其结构的坚固和形态的优美。觚的形态多样，既有单一杯身的设计，也有多层叠加的结构，展示了不同历史时期和地域的文化特色。觚的装饰常包含象征意义的图案，如龙凤呈祥、花卉图案等，寓意吉祥和美好。每一件觚器都是艺术与功能的完美结合，体现了古代工匠的智慧和创造力。",
        "觚作为古代青铜器的重要代表，见证了中国古代饮酒文化和礼仪制度的发展。觚的设计不仅注重美观，还考虑了实用性和仪式性的需求，使其在日常生活和宗教活动中都能发挥重要作用。通过对觚的考古研究，学者们可以了解古代社会的饮食习惯、社交礼仪和宗教信仰，深入探讨古代文化的多样性和复杂性。",
        "青铜觚在古代不仅是饮酒的器具，更是文化交流和社会互动的媒介。觚的存在促进了人与人之间的交流与沟通，成为宴会和祭祀仪式中不可或缺的元素。觚的纹饰和铭文记录了重要的历史事件和社会信息，成为研究古代历史和文化的重要资料。通过觚的传承和使用，古代社会保持了文化的连续性和传统的延续，体现了深厚的文化底蕴和社会价值观。"
      ],
      "2": [
        "簋是古代中国用于盛食物的青铜器具，主要用于祭祀和宴会等重要场合。簋的设计通常呈现碗状，边缘宽广，容量大，便于盛放各种粮食和祭品。簋不仅具备实用功能，还承载着丰富的文化和宗教意义，象征着丰收和祭祀的丰盛。簋的纹饰精美，多采用云雷纹、回纹等传统图案，反映了古代工匠高超的技艺和审美观。",
        "古青铜簋在古代礼仪中扮演着重要角色，用于祭祀活动和宴会盛宴，象征着祭品的丰盛和宴席的隆重。簋的形态多样，尺寸各异，常见的设计包括单簋和对簋，便于使用和展示。簋的铸造工艺复杂，表面常刻有精细的纹饰，反映了古代社会对礼仪的重视和对美的追求。簋作为礼器，体现了古代社会的等级制度和礼仪规范。",
        "簋在古代文化中不仅是盛食物的器具，更是社会地位和文化品味的象征。青铜簋的制作需要高超的冶铸技术和精湛的工艺，通常由贵族或统治者专用，代表着其财富和权力。簋的装饰常包含丰富的象征意义，如龙、凤等图案，寓意吉祥和权威。通过簋的使用和展示，古代社会传递出对丰收、祭祀和礼仪的重视，体现了深厚的文化传统。",
        "古青铜簋是研究古代饮食文化和礼仪制度的重要实物。簋的结构设计合理，既能满足日常使用的需求，又具备仪式性的美感。簋的容量大，便于在祭祀和宴会中盛放大量食物，体现出主人的慷慨和宴席的盛大。簋的纹饰和铭文不仅具有艺术价值，还记录了当时的历史事件和社会风貌，成为考古学和历史研究的重要依据。",
        "簋作为古代青铜器的重要类别，其制作和使用体现了古代社会的经济实力和文化水平。簋的设计融合了实用性和美观性，宽广的边缘设计便于盛放各种食物和祭品，适应了古代宴会和祭祀的需求。簋的纹饰和铭文丰富多样，反映了古代人们的审美观念和艺术追求，象征着吉祥和丰收。通过对簋的研究，可以深入了解古代社会的饮食习惯、宗教信仰和文化传承。"
      ],
      "3": [
        "壺是古代中国青铜器中常见的一种容器，主要用于盛放酒、水或其他液体。壺的形状多样，通常呈圆腹方口或圆口方腹，设计既实用又美观。壺的装饰常见有云雷纹、兽面纹等复杂图案，体现了古代工匠精湛的铸造技艺和艺术审美。作为日常用品和礼仪器具，壺在古代社会中具有重要的实用和象征意义。",
        "青铜壺在古代祭祀和宴会中扮演着重要角色，象征着丰盛和吉祥。壺的大小和装饰风格往往反映出主人的身份和地位，贵族和统治者常使用大型精美的壺器，以展示其权力和财富。壺的形态和纹饰不仅具有实用功能，还承载着丰富的文化内涵，体现了古代社会对礼仪和美学的重视。",
        "古青铜壺的制作工艺复杂，通常采用失蜡法或分段铸造技术，以确保其结构的坚固和纹饰的精细。壺的设计既考虑了实用性，如便于盛放和倒液，又注重美观性，常结合象征性的图案和符号，寓意吉祥如意。每一件壺器都是艺术与功能的结合，展示了古代工匠的智慧和创造力。",
        "壺作为古代青铜器的重要类别，见证了中国古代冶铸技术的发展和文化的演变。壺的设计融合了实用性与仪式性，既能在日常生活中使用，又能在祭祀活动中发挥重要作用。通过对壺的考古研究，学者们可以深入了解古代社会的经济状况、文化习俗和宗教信仰。",
        "青铜壺不仅是实用的器具，更是文化交流和社会互动的媒介。壺的存在促进了人与人之间的交流与沟通，成为宴会和祭祀仪式中不可或缺的元素。壺的纹饰和铭文记录了重要的历史事件和社会信息，成为研究古代历史和文化的重要资料。通过壺的传承和使用，古代社会保持了文化的连续性和传统的延续，体现了深厚的文化底蕴和社会价值观。"
      ],
      "4": [
        "爵是古代中国用于饮酒的青铜器具，通常具有三足和长颈，设计优雅，象征着尊贵和礼仪。爵的形态多样，常见的有单爵和对爵，适用于不同的场合和用途。爵不仅具备实用功能，还承载着丰富的文化和宗教意义，是古代宴会和祭祀中不可或缺的重要礼器。",
        "青铜爵在古代礼仪中扮演着重要角色，象征着丰盛和尊贵。爵的数量和装饰风格反映出主人的身份和地位，贵族和统治者常使用大型精美的爵器，以展示其权力和财富。爵的装饰常见有云雷纹、兽面纹等复杂图案，体现了古代工匠的精湛技艺和艺术审美。通过爵的使用和展示，古代社会强化了礼仪和等级制度的理念。",
        "古青铜爵的制作工艺复杂，通常采用失蜡法或分段铸造技术，以确保其结构的坚固和纹饰的精细。爵的设计不仅注重实用性，如便于盛放和倒酒，还注重美观性，常结合象征性的图案和符号，寓意吉祥如意。每一件爵器都是艺术与功能的结合，展示了古代工匠的智慧和创造力。",
        "爵作为古代青铜器的重要类别，见证了中国古代冶铸技术的发展和文化的演变。爵的设计融合了实用性与仪式性，既能在日常生活中使用，又能在祭祀活动中发挥重要作用。通过对爵的考古研究，学者们可以深入了解古代社会的经济状况、文化习俗和宗教信仰。",
        "青铜爵不仅是实用的器具，更是文化交流和社会互动的媒介。爵的存在促进了人与人之间的交流与沟通，成为宴会和祭祀仪式中不可或缺的元素。爵的纹饰和铭文记录了重要的历史事件和社会信息，成为研究古代历史和文化的重要资料。通过爵的传承和使用，古代社会保持了文化的连续性和传统的延续，体现了深厚的文化底蕴和社会价值观。"
      ],
      "5": [
        "鬲是古代中国用于烹饪和盛食的青铜器具，具有三个腿和一个或多个内胆，设计独特，功能多样。鬲的形态简洁而实用，常用于煮食和煎炸，反映了古代饮食文化的发展。鬲不仅具备实用功能，还承载着丰富的文化和宗教意义，是古代祭祀和日常生活中重要的器具。",
        "青铜鬲在古代社会中具有重要的象征意义，常用于祭祀活动和宴会，象征着丰收和祭品的丰盛。鬲的数量和大小反映出主人的身份和地位，贵族和统治者常使用大型精美的鬲器，以展示其权力和财富。鬲的装饰常见有云雷纹、几何图案等复杂图案，体现了古代工匠的精湛技艺和艺术审美。",
        "古青铜鬲的制作工艺复杂，通常采用失蜡法或分段铸造技术，以确保其结构的坚固和纹饰的精细。鬲的设计不仅注重实用性，如便于烹饪和盛食，还注重美观性，常结合象征性的图案和符号，寓意吉祥如意。每一件鬲器都是艺术与功能的结合，展示了古代工匠的智慧和创造力。",
        "鬲作为古代青铜器的重要类别，见证了中国古代冶铸技术的发展和饮食文化的演变。鬲的设计融合了实用性与仪式性，既能在日常生活中使用，又能在祭祀活动中发挥重要作用。通过对鬲的考古研究，学者们可以深入了解古代社会的经济状况、饮食习惯和文化信仰。",
        "青铜鬲不仅是实用的器具，更是文化交流和社会互动的媒介。鬲的存在促进了人与人之间的交流与沟通，成为宴会和祭祀仪式中不可或缺的元素。鬲的纹饰和铭文记录了重要的历史事件和社会信息，成为研究古代历史和文化的重要资料。通过鬲的传承和使用，古代社会保持了文化的连续性和传统的延续，体现了深厚的文化底蕴和社会价值观。"
      ],
      "6": [
        "甗是古代中国青铜器中用于烹饪和盛放食物的重要器具，具有深厚的文化和实用价值。甗的形状通常为大腹圆底，便于加热和烹煮，设计既实用又美观。甗的装饰常见有云雷纹、兽面纹等复杂图案，体现了古代工匠高超的铸造技术和艺术审美。作为日常用品和礼仪器具，甗在古代社会中扮演着重要的角色。",
        "青铜甗在古代宴会和祭祀中具有重要地位，象征着丰盛和吉祥。甗的大小和装饰风格反映出主人的身份和地位，贵族和统治者常使用大型精美的甗器，以展示其权力和财富。甗的设计不仅注重实用性，如便于烹饪和盛放食物，还注重美观性，常结合象征性的图案和符号，寓意吉祥如意。通过甗的使用和展示，古代社会强化了礼仪和等级制度的理念。",
        "古青铜甗的制作工艺复杂，通常采用失蜡法或分段铸造技术，以确保其结构的坚固和纹饰的精细。甗的形态多样，既有实用型，也有装饰型，反映了不同历史时期和地区的文化特色。甗的装饰常包含丰富的象征意义，如龙凤呈祥、花卉图案等，寓意吉祥和美好。每一件甗器都是艺术与功能的完美结合，展示了古代工匠的智慧和创造力。",
        "甗作为古代青铜器的重要类别，见证了中国古代冶铸技术的发展和饮食文化的演变。甗的设计融合了实用性与仪式性，既能在日常生活中使用，又能在祭祀活动中发挥重要作用。通过对甗的考古研究，学者们可以深入了解古代社会的经济状况、饮食习惯和文化信仰。",
        "青铜甗不仅是实用的器具，更是文化交流和社会互动的媒介。甗的存在促进了人与人之间的交流与沟通，成为宴会和祭祀仪式中不可或缺的元素。甗的纹饰和铭文记录了重要的历史事件和社会信息，成为研究古代历史和文化的重要资料。通过甗的传承和使用，古代社会保持了文化的连续性和传统的延续，体现了深厚的文化底蕴和社会价值观。"
      ],
      "7": [
        "匜是古代中国青铜器中用于盛放祭品和供品的重要器具，具有独特的设计和文化意义。匜的形状通常为高脚壶身，便于倒取和展示，设计既实用又美观。匜的装饰常见有云雷纹、兽面纹等复杂图案，体现了古代工匠高超的铸造技艺和艺术审美。作为礼器，匜不仅具备实用功能，还承载着丰富的文化和宗教意义，是古代祭祀活动中不可或缺的重要器具。",
        "青铜匜在古代祭祀和宴会中具有重要地位，象征着丰盛和吉祥。匜的大小和装饰风格反映出主人的身份和地位，贵族和统治者常使用大型精美的匜器，以展示其权力和财富。匜的设计不仅注重实用性，如便于盛放和倒取祭品，还注重美观性，常结合象征性的图案和符号，寓意吉祥如意。通过匜的使用和展示，古代社会强化了礼仪和等级制度的理念。",
        "古青铜匜的制作工艺复杂，通常采用失蜡法或分段铸造技术，以确保其结构的坚固和纹饰的精细。匜的形态多样，既有实用型，也有装饰型，反映了不同历史时期和地区的文化特色。匜的装饰常包含丰富的象征意义，如龙凤呈祥、花卉图案等，寓意吉祥和美好。每一件匜器都是艺术与功能的完美结合，展示了古代工匠的智慧和创造力。",
        "匜作为古代青铜器的重要类别，见证了中国古代冶铸技术的发展和文化的演变。匜的设计融合了实用性与仪式性，既能在日常生活中使用，又能在祭祀活动中发挥重要作用。通过对匜的考古研究，学者们可以深入了解古代社会的经济状况、文化习俗和宗教信仰。",
        "青铜匜不仅是实用的器具，更是文化交流和社会互动的媒介。匜的存在促进了人与人之间的交流与沟通，成为宴会和祭祀仪式中不可或缺的元素。匜的纹饰和铭文记录了重要的历史事件和社会信息，成为研究古代历史和文化的重要资料。通过匜的传承和使用，古代社会保持了文化的连续性和传统的延续，体现了深厚的文化底蕴和社会价值观。"
      ],
      "8": [
        "卣是古代中国青铜器中用于盛放酒液的重要器具，具有独特的设计和文化意义。卣的形状通常为高颈大腹，便于倒取和保存酒液，设计既实用又美观。卣的装饰常见有云雷纹、兽面纹等复杂图案，体现了古代工匠高超的铸造技艺和艺术审美。作为礼器，卣不仅具备实用功能，还承载着丰富的文化和宗教意义，是古代宴会和祭祀活动中不可或缺的重要器具。",
        "青铜卣在古代宴会和祭祀中具有重要地位，象征着丰盛和吉祥。卣的大小和装饰风格反映出主人的身份和地位，贵族和统治者常使用大型精美的卣器，以展示其权力和财富。卣的设计不仅注重实用性，如便于盛放和倒取酒液，还注重美观性，常结合象征性的图案和符号，寓意吉祥如意。通过卣的使用和展示，古代社会强化了礼仪和等级制度的理念。",
        "古青铜卣的制作工艺复杂，通常采用失蜡法或分段铸造技术，以确保其结构的坚固和纹饰的精细。卣的形态多样，既有实用型，也有装饰型，反映了不同历史时期和地区的文化特色。卣的装饰常包含丰富的象征意义，如龙凤呈祥、花卉图案等，寓意吉祥和美好。每一件卣器都是艺术与功能的完美结合，展示了古代工匠的智慧和创造力。",
        "卣作为古代青铜器的重要类别，见证了中国古代冶铸技术的发展和文化的演变。卣的设计融合了实用性与仪式性，既能在日常生活中使用，又能在祭祀活动中发挥重要作用。通过对卣的考古研究，学者们可以深入了解古代社会的经济状况、文化习俗和宗教信仰。",
        "青铜卣不仅是实用的器具，更是文化交流和社会互动的媒介。卣的存在促进了人与人之间的交流与沟通，成为宴会和祭祀仪式中不可或缺的元素。卣的纹饰和铭文记录了重要的历史事件和社会信息，成为研究古代历史和文化的重要资料。通过卣的传承和使用，古代社会保持了文化的连续性和传统的延续，体现了深厚的文化底蕴和社会价值观。"
      ],
      "9": [
        "觶是古代中国青铜器中一种特殊的礼器，主要用于祭祀和宴会等重要场合。觶的设计独特，通常具有高颈和宽腹，便于盛放和展示酒液或祭品。觶的装饰常见有复杂的云雷纹、兽面纹和几何图案，体现了古代工匠高超的铸造技艺和艺术审美。作为礼器，觶不仅具备实用功能，还承载着丰富的文化和宗教意义，是古代礼仪中不可或缺的重要器具。",
        "青铜觶在古代宴会和祭祀中具有重要地位，象征着丰盛和吉祥。觶的大小和装饰风格反映出主人的身份和地位，贵族和统治者常使用大型精美的觶器，以展示其权力和财富。觶的设计不仅注重实用性，如便于盛放和倒取酒液，还注重美观性，常结合象征性的图案和符号，寓意吉祥如意。通过觶的使用和展示，古代社会强化了礼仪和等级制度的理念。",
        "古青铜觶的制作工艺复杂，通常采用失蜡法或分段铸造技术，以确保其结构的坚固和纹饰的精细。觶的形态多样，既有实用型，也有装饰型，反映了不同历史时期和地区的文化特色。觶的装饰常包含丰富的象征意义，如龙凤呈祥、花卉图案等，寓意吉祥和美好。每一件觶器都是艺术与功能的完美结合，展示了古代工匠的智慧和创造力。",
        "觶作为古代青铜器的重要类别，见证了中国古代冶铸技术的发展和文化的演变。觶的设计融合了实用性与仪式性，既能在日常生活中使用，又能在祭祀活动中发挥重要作用。通过对觶的考古研究，学者们可以深入了解古代社会的经济状况、文化习俗和宗教信仰。",
        "青铜觶不仅是实用的器具，更是文化交流和社会互动的媒介。觶的存在促进了人与人之间的交流与沟通，成为宴会和祭祀仪式中不可或缺的元素。觶的纹饰和铭文记录了重要的历史事件和社会信息，成为研究古代历史和文化的重要资料。通过觶的传承和使用，古代社会保持了文化的连续性和传统的延续，体现了深厚的文化底蕴和社会价值观。"
      ],
      "10": [
        "鐘是古代中国青铜器中用于礼仪和祭祀的重要器具，具有独特的设计和深厚的文化意义。鐘的形状通常为大口大腹，配有挂耳或提手，便于悬挂和敲击。鐘的装饰常见有云雷纹、兽面纹和几何图案，体现了古代工匠高超的铸造技艺和艺术审美。作为礼器，鐘不仅具备实用功能，还承载着丰富的文化和宗教意义，是古代礼仪中不可或缺的重要器具。",
        "青铜鐘在古代祭祀和宴会中具有重要地位，象征着权力和尊贵。鐘的大小和装饰风格反映出主人的身份和地位，贵族和统治者常使用大型精美的鐘器，以展示其权力和财富。鐘的设计不仅注重实用性，如便于敲击和发声，还注重美观性，常结合象征性的图案和符号，寓意吉祥如意。通过鐘的使用和展示，古代社会强化了礼仪和等级制度的理念。",
        "古青铜鐘的制作工艺复杂，通常采用失蜡法或分段铸造技术，以确保其结构的坚固和纹饰的精细。鐘的形态多样，既有实用型，也有装饰型，反映了不同历史时期和地区的文化特色。鐘的装饰常包含丰富的象征意义，如龙凤呈祥、花卉图案等，寓意吉祥和美好。每一件鐘器都是艺术与功能的完美结合，展示了古代工匠的智慧和创造力。",
        "鐘作为古代青铜器的重要类别，见证了中国古代冶铸技术的发展和文化的演变。鐘的设计融合了实用性与仪式性，既能在日常生活中使用，又能在祭祀活动中发挥重要作用。通过对鐘的考古研究，学者们可以深入了解古代社会的经济状况、文化习俗和宗教信仰。",
        "青铜鐘不仅是实用的器具，更是文化交流和社会互动的媒介。鐘的存在促进了人与人之间的交流与沟通，成为宴会和祭祀仪式中不可或缺的元素。鐘的纹饰和铭文记录了重要的历史事件和社会信息，成为研究古代历史和文化的重要资料。通过鐘的传承和使用，古代社会保持了文化的连续性和传统的延续，体现了深厚的文化底蕴和社会价值观。"
      ],
      "11": [
        "尊是古代中国青铜器中用于盛放酒液的重要器具，具有独特的设计和深厚的文化意义。尊的形状通常为大口大腹，配有提手和耳，便于盛放和倒取酒液，设计既实用又美观。尊的装饰常见有云雷纹、兽面纹和几何图案，体现了古代工匠高超的铸造技艺和艺术审美。作为礼器，尊不仅具备实用功能，还承载着丰富的文化和宗教意义，是古代宴会和祭祀活动中不可或缺的重要器具。",
        "青铜尊在古代宴会和祭祀中具有重要地位，象征着丰盛和吉祥。尊的大小和装饰风格反映出主人的身份和地位，贵族和统治者常使用大型精美的尊器，以展示其权力和财富。尊的设计不仅注重实用性，如便于盛放和倒取酒液，还注重美观性，常结合象征性的图案和符号，寓意吉祥如意。通过尊的使用和展示，古代社会强化了礼仪和等级制度的理念。",
        "古青铜尊的制作工艺复杂，通常采用失蜡法或分段铸造技术，以确保其结构的坚固和纹饰的精细。尊的形态多样，既有实用型，也有装饰型，反映了不同历史时期和地区的文化特色。尊的装饰常包含丰富的象征意义，如龙凤呈祥、花卉图案等，寓意吉祥和美好。每一件尊器都是艺术与功能的完美结合，展示了古代工匠的智慧和创造力。",
        "尊作为古代青铜器的重要类别，见证了中国古代冶铸技术的发展和文化的演变。尊的设计融合了实用性与仪式性，既能在日常生活中使用，又能在祭祀活动中发挥重要作用。通过对尊的考古研究，学者们可以深入了解古代社会的经济状况、文化习俗和宗教信仰。",
        "青铜尊不仅是实用的器具，更是文化交流和社会互动的媒介。尊的存在促进了人与人之间的交流与沟通，成为宴会和祭祀仪式中不可或缺的元素。尊的纹饰和铭文记录了重要的历史事件和社会信息，成为研究古代历史和文化的重要资料。通过尊的传承和使用，古代社会保持了文化的连续性和传统的延续，体现了深厚的文化底蕴和社会价值观。"
      ]
      },
      // 当前描述，随机选择一个
      currentDescription: '',
      // 预测结果
      predictedClass: null,
      probability: 0,
      // 新增的属性，用于存储预测结果
      class1Results: [], // 年代预测结果
      class2Results: [], // 类别预测结果
      // 新增的定时器引用
      progressInterval: null,
      processingTimeout: null,
    };
  },
  computed: {
    topCategory() {
      return this.class2Results[0] || { label: '14', probability: 0 };
    },
    topEra() {
      return this.class1Results[0] || { label: '4', probability: 0 };
    },
    otherCategories() {
      return this.class2Results.slice(1, 4);
    },
    otherEras() {
      return this.class1Results.slice(1, 4);
    }
  },
  methods: {
    /**
     * 选择图片按钮点击事件
     */
    selectImage() {
      this.$refs.fileInput.click();
    },
    /**
     * 处理文件上传事件
     */
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.selectedFile = file;
        this.createImagePreview();
      } else {
        this.selectedFile = null;
        this.uploadedImage = null;
      }
    },
    /**
     * 创建图片预览
     */
    createImagePreview() {
      if (this.selectedFile) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.uploadedImage = e.target.result;
        };
        reader.readAsDataURL(this.selectedFile);
      }
    },
    /**
     * 开始处理（上传并分类）
     */
    startProcessing() {
      this.processing = true;
      this.progress = 0;
      this.showResult = false;
      this.predictedClass = null;
      this.probability = 0;
      this.currentDescription = ''; // 重置当前描述
      this.class1Results = [];
      this.class2Results = [];
      this.simulateProgress();
      this.uploadAndPredict();
    },
    /**
     * 模拟进度条
     */
    simulateProgress() {
      if (this.progressInterval) {
        clearInterval(this.progressInterval);
      }
      this.progressInterval = setInterval(() => {
        if (this.progress < 90) {
          this.progress += 10;
        } else {
          clearInterval(this.progressInterval);
          this.progressInterval = null;
        }
      }, 500);
    },
    /**
     * 上传文件并进行预测
     */
     async uploadAndPredict() {
      if (!this.selectedFile) return;
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      try {
        // 上传文件
        const uploadResponse = await axios.post(`${BASE_URL}/api4/upload`, formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        });
        const uploadedFilePath = uploadResponse.data.file_path;

        // 进行预测
        const predictResponse = await axios.post(`${BASE_URL}/api4/predict`, {
          image_path: uploadedFilePath
        });

        // 获取预测结果
        let class1Results = predictResponse.data.class1_top_labels;
        let class2Results = predictResponse.data.class2_top_labels;

        // 确保 label 是字符串类型
        this.class1Results = class1Results.map(result => ({
          label: String(result.label),
          probability: result.probability
        }));
        this.class2Results = class2Results.map(result => ({
          label: String(result.label),
          probability: result.probability
        }));

        // 设置预测的类别和概率（类别预测的第一个结果）
        if (this.class2Results.length > 0) {
          this.predictedClass = this.class2Results[0].label;
          this.probability = this.class2Results[0].probability;
        }

        // 随机选择一个描述
        const descriptions = this.descriptionMapping[this.predictedClass];
        if (Array.isArray(descriptions) && descriptions.length > 0) {
          const randomIndex = Math.floor(Math.random() * descriptions.length);
          this.currentDescription = descriptions[randomIndex];
        } else {
          this.currentDescription = this.descriptionMapping[this.predictedClass] || '';
        }

        // 确保处理时间至少为5秒
        if (this.processingTimeout) {
          clearTimeout(this.processingTimeout);
        }
        this.processingTimeout = setTimeout(() => {
          this.processing = false;
          this.progress = 100;
          this.showResult = true;
          this.processingTimeout = null;
        }, 5000);
      } catch (error) {
        console.error('处理失败:', error);
        let errorMessage = '上传或分类过程中出现错误。';
        if (error.response && error.response.data && error.response.data.error) {
          errorMessage = error.response.data.error;
        }
        alert(errorMessage);
        this.processing = false;
        this.progress = 0;
        this.resetUpload(); // 重置上传
      }
    },

    /**
     * 返回按钮点击事件
     */
    goBack() {
      window.history.back();
    },
    /**
     * 打开模态框
     */
    openModal(imageSrc) {
      if (imageSrc) {
        this.modalImage = imageSrc;
        this.modalVisible = true;
      }
    },
    /**
     * 关闭模态框
     */
    closeModal() {
      this.modalVisible = false;
      this.modalImage = null;
    },
    /**
     * 下载图片
     */
    downloadImage(imageSrc, imageName) {
      const link = document.createElement('a');
      link.href = imageSrc;
      link.download = `${imageName}.jpg`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    /**
     * 重新上传按钮点击事件
     */
    resetUpload() {
      // 清除定时器
      if (this.progressInterval) {
        clearInterval(this.progressInterval);
        this.progressInterval = null;
      }
      if (this.processingTimeout) {
        clearTimeout(this.processingTimeout);
        this.processingTimeout = null;
      }
      // 重置数据属性
      this.selectedFile = null;
      this.uploadedImage = null;
      this.currentDescription = '';
      this.class1Results = [];
      this.class2Results = [];
      this.predictedClass = null;
      this.probability = 0;
      this.progress = 0;
      this.processing = false;
      this.showResult = false;
      // 重置文件输入的值
      if (this.$refs.fileInput) {
        this.$refs.fileInput.value = null;
      }
    },
    /**
     * 再识别一张按钮点击事件
     */
    resetAll() {
      this.resetUpload();
    },
  },
};
</script>

<style scoped>
/* 整体暗淡青铜主题样式 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Playfair+Display&display=swap');

/* 主容器 */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #1c2827; /* 深绿色背景 */
  min-height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-image: url('@/assets/s2.jpg'); 
  background-repeat: no-repeat; /* 背景图不重复 */
  background-size: cover; /* 背景图覆盖整个区域 */
  background-position: center; /* 背景图居中 */
  background-attachment: fixed; /* 背景图固定 */
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 确保背景图覆盖整个视口高度 */
}

/* 头部容器 */
.header-container {
  margin: 20px auto;
  width: 100%;
}

.header-box {
  margin-top: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1c2827, #5e4b3c); /* 深绿色到深棕色的渐变 */
  border-radius: 20px;
  padding: 10px 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
  margin-left: 200px;
  margin-right: 200px;
}

.title {
  font-size: 32px; /* 增大标题字体 */
  font-weight: bold;
  color: #fdf6e3; /* 淡色字体 */
  margin: 0 10px;
  font-family: 'Playfair Display', serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* 返回按钮样式 */
.btn-back {
  background-color: #8b4513; /* 深棕色 */
  color: #fdf6e3;
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.btn-back:hover {
  background-color: #5e4b3c; /* 更深的棕色 */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
}

/* 内容容器 */
.content-container {
  width: 800px;
  margin: 0 auto;
}

/* 内容框 */
.content-box {
  padding: 20px;
  background-color: #2e2e2e; /* 深灰背景 */
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}

/* 功能介绍文字的深色圆角框 */
.introduction-box {
  background: #3e2a1f; /* 深棕色背景 */
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
  animation: fadeIn 1s ease-in-out;
  text-align: center;
}

.introduction-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.1) 100%);
  animation: rotate 30s linear infinite;
}

.introduction-text {
  font-family: 'Playfair Display', serif; /* 使用不同字体 */
  font-size: 20px; /* 较大的字体大小 */
  color: #fdf6e3; /* 淡色字体 */
  line-height: 1.8;
  margin: 0;
  position: relative; /* 确保文字在伪元素之上 */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* 增加文字阴影 */
  font-weight: 600; /* 适度加粗 */
  letter-spacing: 0.5px; /* 增加字间距 */
}

.note-text {
  font-family: 'Playfair Display', serif;
  font-size: 16px; /* 较小的字体大小 */
  color: #d4af37; /* 金色 */
  line-height: 1.5;
  margin-top: 15px; /* 与上面的文字保持一定距离 */
  opacity: 0.9; /* 稍微降低不透明度 */
  text-align: center;
}

.available-types {
  font-family: 'Montserrat', sans-serif; /* 使用不同字体 */
  font-size: 20px; /* 字体大小 */
  color: #d4af37; /* 金色 */
  line-height: 1.8;
  margin: 10px 0 0 0;
  position: relative; /* 确保文字在伪元素之上 */
  text-align: center; /* 居中对齐 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 更明显的文字阴影 */
  font-weight: 800; /* 更加加粗 */
  letter-spacing: 1px; /* 增加字间距 */
  transition: transform 0.3s, color 0.3s; /* 添加过渡效果 */
}

.available-types:hover {
  transform: scale(1.05); /* 鼠标悬停时放大 */
  color: #b89c34; /* 改变为更深的金色 */
}

/* 图片标题样式 */
.image-title {
  font-size: 18px;
  color: #fdf6e3; /* 淡色字体 */
  text-align: center;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* 图片框样式 */
.image-box {
  width: 300px;
  height: 300px;
  background-color: #3e2a1f; /* 深棕色背景 */
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  margin: 0 auto 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.image-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: fadeIn 0.5s ease-in-out;
  border-radius: 10px;
}

.placeholder {
  font-size: 18px;
  color: #d4af37; /* 金色 */
  cursor: pointer;
  animation: pulse 2s infinite;
}

.placeholder p {
  margin: 0;
}

/* 上传按钮样式 */
.upload-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-upload {
  background-color: #d4af37; /* 金色 */
  color: #2e2e2e; /* 深色字体 */
  padding: 12px 24px;
  font-size: 18px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
}

.btn-upload:hover {
  background-color: #b89c34; /* 更深的金色 */
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.6);
}

/* 重新上传按钮样式 */
.btn-reupload {
  background-color: #5e4b3c; /* 暗棕色 */
  color: #fdf6e3; /* 淡色字体 */
  padding: 12px 24px;
  font-size: 18px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 14px rgba(94, 75, 60, 0.4);
}

.btn-reupload:hover {
  background-color: #3e2a1f; /* 更深的棕色 */
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(94, 75, 60, 0.6);
}

/* 处理中覆盖层 */
.processing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(94, 75, 60, 0.8); /* 半透明棕色 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.progress-bar {
  width: 80%;
  height: 10px;
  background-color: #d4af37; /* 金色背景 */
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #8b4513; /* 深棕色 */
  width: 0%;
  transition: width 1s linear;
}

.processing-text {
  font-size: 18px;
  color: #fdf6e3; /* 淡色字体 */
  font-family: 'Montserrat', sans-serif;
}

/* 预测结果框样式 */
.result-box {
  padding: 30px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;

  /* 渐变背景 */
  background: linear-gradient(135deg, #1c2827, #5e4b3c); /* 深绿色到深棕色的渐变 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
}

.result-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.1) 100%);
  animation: rotate 20s linear infinite;
}

.result-container {
  margin-bottom: 20px;
  text-align: center;
}

.result-title {
  font-size: 36px; /* 更大字体 */
  font-weight: bold;
  color: #d4af37; /* 金色 */
  margin: 0;
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* 预测结果展示 */
.prediction-result {
  margin-top: 20px;
  padding: 20px;
  background: rgba(94, 75, 60, 0.8); /* 半透明棕色背景 */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* 最前面的概率最高的类别和年代 */
.top-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.top-category, .top-era {
  font-size: 28px; /* 增大字体 */
  font-weight: bold;
  color: #d4af37; /* 金色 */
  background-color: #5e4b3c; /* 深棕色背景 */
  padding: 10px 20px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.label-header {
  font-size: 28px; /* 增大字体 */
  color: #fdf6e3; /* 淡色字体 */
}

.top-category .probability, .top-era .probability {
  font-size: 22px; /* 调整字体大小 */
  color: #fdf6e3; /* 淡色字体 */
  margin-left: 10px;
}

/* 其他预测结果 */
.other-results {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.other-section {
  width: 48%;
}

.other-section h4 {
  font-size: 18px;
  color: #d4af37; /* 金色 */
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
}

.other-section ul {
  list-style-type: none;
  padding: 0;
}

.other-section li {
  font-size: 16px;
  color: #fdf6e3; /* 淡色字体 */
  margin-bottom: 5px;
  font-family: 'Montserrat', sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 描述 */
.description {
  font-size: 18px;
  color: #d4af37; /* 金色 */
  line-height: 1.6;
  font-family: 'Playfair Display', serif;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* 再识别一张按钮样式 */
.recognize-button {
  text-align: center;
  margin-top: 20px;
}

.btn-recognize {
  background-color: #d4af37; /* 金色 */
  color: #2e2e2e; /* 深色字体 */
  padding: 12px 24px;
  font-size: 18px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
}

.btn-recognize:hover {
  background-color: #b89c34; /* 更深的金色 */
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.6);
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
  border-radius: 10px;
  animation: zoomIn 0.3s ease-out;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.modal-image {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
}

.btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(212, 175, 55, 0.8); /* 半透明金色 */
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.btn-close:hover {
  background-color: rgba(212, 175, 55, 1); /* 不透明金色 */
  transform: rotate(90deg);
}

.btn-close svg {
  color: #2e2e2e; /* 深色图标 */
}

/* 动画效果 */
@keyframes zoomIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

